<template>
	<view class="content display  displayColumn fontSize font_comm">
		<u-navbar @rightClick="rightClick" :autoBack="true" :placeholder="true">
			<template slot="left">
				<uni-icons type="left" color="#212121;" size="23" ></uni-icons>
			</template>
			<template slot="center">
				<text class="fontSize font_comm title">加油站信息</text>
			</template>
		</u-navbar>
		<!-- 为空是显示 -->
		<view class="fn_null display  width-100 all_item M-T24 displayColumn" style="margin-top: 134rpx;" v-if="false">
			<image class="fn_image" src="http://mkxd-app.oss-cn-beijing.aliyuncs.com/2025/01/11/50cb06712ff646e09b8008b1fc49e301.png" mode=""></image>
			<span class="fn_ttx1 M-T30">暂未添加加油站</span>
		</view>
		
		<view class="fn_gasInfo display  width-100 displayColumn displaycenter_aliem">
			<view class="gasItem display  displayColumn M-T24" @click="toDetails(item.id)" v-for="(item,index) in columns1" :key="index">
				<!-- 状态 -->
				<view class="gasStatus display  width-100">
					<!-- <view class="status display  all_item M-R24">
						<span class="wode">审核中</span>
					</view> -->
					 <view class="status1 display  all_item M-R24" v-if="item.businessStatus==0">
						<span class="wode1">运营中</span>
					</view> 
					<view class="status2 display  all_item M-R24" v-if="item.businessStatus==1">
						<span class="wode2">歇业中</span>
					</view> 
					<view class="status3 display  all_item M-R24" v-if="item.businessStatus==2">
						<span class="wode">已闭站</span>
					</view>
				</view>
				<span class="fn_ttx11 M-L24">{{item.stationName}}</span>
				<span class="fn_ttx2 M-L24" style="margin-top: 12rpx;">{{item.area}}{{item.address}}</span>
				<span class="fn_ttx3 M-L24" style="margin-top: 20rpx;">营业时间：{{item.startTime}} - {{item.endTime}}</span>
			</view>
		</view>
		
		<view class="width-100  fn_nulls display  all_item" v-if="columns1.length>0">
			<button class="fn_btn_bottoms" @click="add">立即添加</button>
		</view>
		<!-- 为空显示的按钮 -->
		<view class="width-100  fn_nulls display  all_item" v-if="columns1.length==0">
			<button class="fn_btn_bottoms" @click="add">立即添加</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				columns1:[]
			}
		},
		onLoad(){
			this.getInfoList();
		},
		methods: {
			getInfoList(){
				this.$modal.loading('加载中');
				this.$req.get('/xcx/petrolStation/getAllStations').then(res=>{
					console.log(res)
					this.$modal.closeLoading();
					if(res.data.code==200){
						this.columns1 =res.data.data;
					}else{
						this.$modal.msg(res.data.msg);
					}
					
					
				})
			},
			//立即添加
			add(){
				this.$tab.navigateTo('/packageC/addGasInfo/addGasInfo')
			},
			toDetails(id){
				this.$tab.navigateTo('/packageC/gasDetails/gasDetails?id='+id)
			}
		}
	}
</script>

<style scoped lang="scss">
.fn_image{
	width: 234rpx;
	height: 234rpx;
}
.fn_ttx1{
	font-weight: 400;
	font-size: 28rpx;
	color: #000000;
}
.fn_nulls{
	position: fixed;
	bottom: 108rpx;
}
.wode1{
	font-weight: 600;
	font-size: 20rpx;
	color: #FFFFFF;
}
.wode2{
	font-weight: 600;
	font-size: 20rpx;
	color: #FFFFFF;
}
.fn_btn_bottoms{
	width: 690rpx;
	height: 66rpx;
	background: #126BC9;
	border-radius: 44rpx 44rpx 44rpx 44rpx;
	font-weight: 600;
	font-size: 24rpx;
	color: #FFFFFF;
}
.gasItem{
	width: 690rpx;
	// height: 188rpx;
	padding-bottom: 24rpx;
	// padding-top: 24rpx;
	padding-bottom: 24rpx;
	background: #FFFFFF;
	border-radius: 24rpx 24rpx 24rpx 24rpx;
	text-align: left;
}
.gasStatus{
	justify-content: flex-end;
}
.status{
	width: 116rpx;
	height: 34rpx;
	background: #FF672D;
	border-radius: 0rpx 0rpx 8rpx 8rpx;
	
}
.wode{
	font-weight: 600;
	font-size: 20rpx;
	color: #FFFFFF;
}
.fn_ttx11{
	font-weight: 600;
	font-size: 28rpx;
	color: #000000;
}
.fn_ttx2{
	font-weight: 400;
	font-size: 24rpx;
	color: #72778A;
}
.fn_ttx3{
	font-weight: 400;
	font-size: 24rpx;
	color: #000000;
}
.status1{
	width: 116rpx;
	height: 34rpx;
	background: #126BC9;
	border-radius: 0rpx 0rpx 8rpx 8rpx;
}
.status2{
	width: 116rpx;
	height: 34rpx;
	background: #5A3C27;
	border-radius: 0rpx 0rpx 8rpx 8rpx;
}
.status3{
	width: 116rpx;
	height: 34rpx;
	background: #72778A;
	border-radius: 0rpx 0rpx 8rpx 8rpx;
}
</style>
